<template>
	<view class="module-send-code">
		<text
			class="button-code"
			:class="{ active: phoneCorrect == true }"
			@click="handleGetCode"
			v-show="!isDisabled"
		>
			发送验证码
		</text>
		<text class="code-tips" v-show="isDisabled">{{ getCodeTitle }}</text>
	</view>
</template>

<script>
/**
 * productInfo 商品信息展示
 * @property {String} phone 手机号码
 * @property {Boolean} disabled 判断是否能点击
 * @example <sendCode :phone></sendCode>
 */
export default {
	props: {
		phone: {
			type: String,
			default: '',
		},
		phoneCorrect: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			isDisabled: this.disabled,
			getCodeTitle: '',
		};
	},
	watch: {
		// 监听props变化
		disabled(val) {
			this.isDisabled = !val;
		},
	},
	methods: {
		/** 获取手机验证码**/
		handleGetCode() {
			const myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
			if (!myreg.test(this.phone)) {
				uni.showToast({
					title: '请输入有效的手机号码',
					duration: 1000,
					icon: 'none',
				});
				return false;
			}
			if (this.timer) {
				clearInterval(this.timer);
			}
			let time = 5;
			if (!this.isDisabled) {
				this.isDisabled = true;
				this.getCodeTitle = time + '秒重新获取';
				this.timer = setInterval(() => {
					time--;
					this.getCodeTitle = time + '秒重新获取';
					if (time === 0) {
						clearInterval(this.timer);
						this.getCodeTitle = '';
						this.isDisabled = false;
					}
				}, 1000);
			}
		},
	},
};
</script>

<style lang="scss">
.module-send-code {
	.button-code {
		// padding: 8rpx 14rpx;
		border-radius: 4px;
		color: #999;
		// @include borderCreator('', solid, #ddd);
		&.active {
			color: $uni-color-main;
		}
	}

	.code-tips {
		@extend .button-code;
		color: #bbb;
	}
}
</style>
